;
(function() {
    let ctx = document.querySelector('#clock').getContext('2d');
    console.log(ctx)
    cWidth = ctx.canvas.width
        //画布的宽度
    cHeight = ctx.canvas.height
        //画布的高度
    t = null

    class Clock {
        constructor() {
                this.r = cWidth / 2
                    //获取圆心坐标，赋值
            }
            //初始化函数
        init() {
            console.log(1)
            this.draw()
            t = setInterval(this.draw.bind(this), 1000)
        }

        draw() {

            ctx.clearRect(0, 0, cWidth, cHeight)

            var { hours, minutes, seconds } = getTime()
            ctx.save()
            this.drawPanel()
            this.drawNum()
            this.drawHour(hours, minutes)
            this.drawMinute(minutes, seconds)
            this.drawSecond(seconds)
            this.drawPoint()
            ctx.restore()

        }

        drawPanel() {
            ctx.translate(this.r, this.r)
            ctx.beginPath()
            ctx.arc(0, 0, this.r - 20, 0, 2 * Math.PI)
            ctx.fillStyle = 'white'
            ctx.fill()
        }

        drawNum() {
            let radius, x, y;
            let num = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2, ]
            ctx.fillStyle = 'black'
            ctx.font = '40px sans-serif'
            ctx.textAlign = 'center'
            ctx.textBaseline = 'middle'
            num.forEach((item, index) => {
                ctx.beginPath()
                radius = 2 * Math.PI / 12 * index
                x = (this.r - 60) * Math.cos(radius)
                y = (this.r - 60) * Math.sin(radius)
                ctx.fillText(item, x, y)
            })
        }

        drawPoint() {
            ctx.beginPath()
            ctx.fillStyle = '#333'
            ctx.arc(0, 0, 12, 0, 2 * Math.PI)
            ctx.fill()
            ctx.beginPath()
            ctx.fillStyle = '#666'
            ctx.arc(0, 0, 6, 0, 2 * Math.PI)
            ctx.fill()
        }

        drawHour(hours, minutes) {
            ctx.save()
            var radius = 2 * Math.PI / 12 * hours,
                mRadius = 2 * Math.PI / 12 / 60 * minutes;
            ctx.beginPath()
            ctx.lineWidth = 5
            ctx.lineCap = 'round'
                //线条尾端样式：round圆角
            ctx.rotate(radius + mRadius)
            ctx.moveTo(0, 0)
            ctx.lineTo(0, -this.r / 2)
            ctx.stroke()
            ctx.restore()
        }

        drawMinute(minutes, seconds) {
            ctx.save()
            var radius = 2 * Math.PI / 60 * minutes,
                sRadius = 2 * Math.PI / 60 / 60 * seconds;
            ctx.beginPath()
            ctx.lineWidth = 5
            ctx.lineCap = 'round'
                //线条尾端样式：round圆角
            ctx.rotate(radius + sRadius)
            ctx.moveTo(0, 0)
            ctx.lineTo(0, -this.r / 1.6)
            ctx.stroke()
            ctx.restore()
        }

        drawSecond(seconds) {
            ctx.save()
            var radius = 2 * Math.PI / 60 * seconds
            ctx.beginPath()
            ctx.lineWidth = 5
            ctx.lineCap = 'round'
                //线条尾端样式：round圆角
            ctx.rotate(radius)
            ctx.moveTo(0, 0)
            ctx.lineTo(0, -this.r / 1.2)
            ctx.strokeStyle = 'orange'
            ctx.stroke()
            ctx.restore()
        }
    }

    function getTime() {
        var d = new Date()
        return {
            hours: d.getHours(),
            minutes: d.getMinutes(),
            seconds: d.getSeconds()
        }
    }

    window.Clock = Clock;
})();